<template>
    <div class="layout" id="building">
        <div class="container">
            <div class="left">
                <img src="/public/zzzLogo.png" alt="">
            </div>
            <div class="right">
                <img class="back" @click="back()" src="/public/button.svg" alt="">
                <div class="input">
                    <el-input v-model="account"  maxlength="10" placeholder="输入账号" show-word-limit
                        type="text" />

                    <el-input v-model="password"  maxlength="16" placeholder="输入密码"
                        type="password" />

                </div>
                <el-button size="large" type="primary" round @click="login">登录</el-button>
                <el-button size="large" type="primary" round @click="drawer = true">注册</el-button>
            </div>
        </div>
    </div>
    <el-drawer  modal v-model="drawer" title="注册账号">
        <div class="register">
            <el-upload class="avatar-uploader" :accept="acceptAstrict" :http-request="uploadFiles"
                :before-upload="beforeUpload" :show-file-list="false" :disabled="img.length > 0">
                <img v-if="img" @click="clickImg" :src="img" class="avatar img" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
                <img class="delete" @click="deleteimg" v-if="img" src="/delete.svg" alt="">
            </el-upload>
            <el-input v-model="userName"  maxlength="10" placeholder="输入用户名" show-word-limit
                type="text" />
            <el-input v-model="accountR"  maxlength="10" placeholder="输入账号" show-word-limit
                type="text" @blur="checkAccount" />
            <el-input v-model="passwordR"  show-password maxlength="16" placeholder="输入密码"
                type="password" />
            <el-button @click="register" size="large" type="primary" :disabled="isDisable" round>注册</el-button>
        </div>
    </el-drawer>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import axios from 'axios';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const props = defineProps(['user','userList'])
const emits = defineEmits(['login'])
// 登录
const account = ref("")
const password = ref("")
const drawer = ref(false)
const router = useRouter()

const isDisable = ref(false)

// 注册
const accountR = ref("")
const passwordR = ref("")
const userName = ref('')
const img = ref('')

const acceptAstrict = '.jpg,.jpeg,.png,.JPG,.PNG' //文件上传限制
const back = function () {
    router.back()
}

// 处理账号重复情况
const checkAccount = function () {
    axios({
        url: '/api/users/account',
        method: 'GET',
        params: {
            account: accountR.value
        }
    }).then(res => {
        if (res.data.code === 0) {
            ElMessage({
                message: res.data.msg,
                offset: 100,
                type: 'error'
            })
            isDisable.value = true
        } else {
            isDisable.value = false
        }
    }).catch(e => {
        ElMessage({
            message: "服务器异常，请联系管理员B站诺丁汉小森林",
            type: "error"
        })
    })
}

// 注册账号
const register = function () {
    if (accountR.value === '' || passwordR.value === '' || userName.value === '') {
        ElMessage({
            message: "注册消息填写不完整",
            offset: 100,
            type: 'error'
        })
        return;
    }
    const data = {
        account: accountR.value,
        password: passwordR.value,
        userName: userName.value,
        img: img.value
    }
    axios.post('/api/users', data)
        .then(res => {
            ElMessage({
                message: "注册成功",
                offset: 100,
                type: 'success'
            })
        }).catch(e => {
            ElMessage({
                message: "服务器异常，请联系管理员B站诺丁汉小森林",
                type: "error"
            })
        })
}

// 登录
const login = function () {
    if (account.value === '' || password.value === '') {
        ElMessage({
            message: "登录消息填写不完整",
            offset: 100,
            type: 'error'
        })
        return;
    }
    axios.post('/api/login', { account: account.value, password: password.value })
        .then(res => {
            if (res.data.code === 0) {
                ElMessage({
                    message: res.data.msg,
                    offset: 100,
                    type: 'error'
                })
            } else {
                localStorage.setItem('token', res.data.data)
                emits('login',"abc")           
                router.back()
            }
        }).catch(e => {
            ElMessage({
                message: "服务器异常，请联系管理员B站诺丁汉小森林",
                type: "error"
            })
        })
}

const uploadFiles = function (file) {
    let formData = new FormData()
    formData.append('image', file.file)
    console.log(file.file)
    console.log(formData);
    axios({
        url: 'api/files/upload',
        method: 'POST',
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        data: formData
    }).then(res => {
        console.log(res)
        img.value = res.data.data;
    }).catch(e => {
        ElMessage({
            message: "服务器异常，请联系管理员B站诺丁汉小森林",
            type: "error"
        })
    })
}
//检查上传文件的格式
const beforeUpload = function (file) {
    if (file.size > 2 * 1024 * 1024) {
        alert('头像大小不要超过1MB')
        return false;
    }
    let fileType = file.type.substring(file.type.lastIndexOf('/') + 1)
    if (fileType !== 'jpeg' && fileType !== 'png') {
        alert('封面格式要求为jpg或png')
        return false;
    }
    return true
}

// 删除上传的图片
const deleteimg = function () {
    let img1 = img.value.substring(img.value.lastIndexOf('/') + 1)
    axios.post('/api/files/delete',{cover:img1})
    .then(res => {
        if (res.data.code === 1) {
            ElMessage({
                message: "删除照片成功",
                offset: 300,
                type: 'success'
            })
            img.value = ''
        } else {
            ElMessage({
                message: "删除照片失败",
                offset: 400,
                type: 'error'
            })
        }
    }).catch(e => {
        ElMessage({
            message: "服务器异常，请联系管理员",
            type: "error"
        })
    })
}

const clickImg = function () {
    ElMessage({
        message: "只允许上传一张图片",
        offset: 100,
        type: 'info'
    })
}
console.log(img.value)
</script>

<style lang="scss" scoped>
.layout {
    position: relative;
    z-index: 200;
    height: calc(100vh);
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;

    .container {
        height: 60%;
        width: 50%;
        border-radius: 60px;
        border: 3px solid rgba(97, 95, 95, 0.5);
        overflow: hidden;
        display: grid;
        grid-template-columns: 4fr 6fr;

        .left {
            height: auto;
            width: auto;
            background-color: #303030;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        .right {
            position: relative;
            background-color: rgba(34, 33, 34, 0.9);

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .back {
                position: absolute;
                top: 10px;
                right: 20px;
                cursor: pointer;
            }

            .input {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-bottom: 10px;

                .el-input {
                    font-size:  calc(100vw * 14 / 1920);
                    width:calc(100vw * 400 / 1920);
                    height: calc(100vw * 40 / 1920);
                    margin-top: 20px;
                    overflow: hidden;
                }
            }
        }

        .el-button {
            margin-top: 20px;
            margin-left: 0;
            display: block;
            font-size: calc(100vw * 16 / 1920);
            height: calc(100vw *55 / 1920);
            border-radius: calc(100vw *55 / 1920);
            width: 60%;
        }
    }
}
#building {
    object-fit: fill;
    background-size: 100%;
    background: url(/public/fill-black-right.png);
    background-color: #333;
}

.register {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: block;
    .el-input,
    .el-button,
    .el-upload {
        font-size: calc(100vh *16 / 1920);
        height: calc(100vh * 80 / 1920);
        width: calc(100vw * 500 / 1920);
        margin-top: 10px;
        margin-bottom: 10px;
    }
}



.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed #000;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    border: 1px dashed #ccc;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.delete {
    height: calc(100vh *100 / 1920);
    width: calc(100vw * 100 / 1920);
    cursor: pointer;
}
</style>